<template>
  <div class="position-search-content">
    <div class="input-block">
      <input v-model="searchKeyWord" type="text" :placeholder="identity==='1'?'搜索职位关键词':'搜索求职者关键词'"/>
      <div class="btn2 search-btn" @click="submit">搜索</div>
    </div>
    <div class="hot-block">
      热搜：
      <div @click="searchKeyWord=item" v-for="(item,index) in hot" class="hot-item">{{ item }}</div>
<!--      <div class="hot-item">销售</div>-->
    </div>
  </div>
</template>

<script>
import Cookies from "js-cookie";

export default {
  name: "PositionSearch",

  data() {
    return {
      hot: ['客户经理', '销售', 'Java', '产品经理','采购','UI设计师','Web前端'],
      searchKeyWord: '',
      identity: 0
    }
  },
  methods:{
    submit()
    {
      this.$emit('positionSearchSub',this.searchKeyWord);
    }
  },
  mounted() {
    this.identity = Cookies.get('identity');
  }
}
</script>

<style lang="scss" scoped>
.position-search-content {
  width: 100%;
  margin-top: 0;
  height: 150px;
  background: #fff;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  .input-block {
    width: 900px;
    height: 55px;
    box-shadow: 3px 5px 15px 0 rgb(0 0 0 / 10%);
    border-radius: 30px;
    padding: 6px 0;
    display: flex;
    flex-direction: row;
    align-items: center;

    input {
      width: calc(100% - 110px);
      height: 100%;
      display: flex;
      align-items: center;
      background: none;
      padding: 0 20px;
      font-size: 18px;
    }

    .search-btn {
      width: 100px;
      height: 100%;
    }
  }

  .hot-block {
    width: 900px;
    display: flex;
    margin-top: 20px;
    flex-direction: row;
    color: $darkGray;
    font-size: 17px;
    padding-left: 10px;

    .hot-item {
      color: $darkGray;
      margin: 0 15px;
      cursor: pointer;
    }
  }
}
</style>
